<template>
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>商品管理</span>
            </div>
        </div>
        <div class="pad_20 flex-bet flex-y-top">
            <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
                    <el-form-item label="商品名称">
                        <el-input v-model="formInline.name" size="medium" placeholder="请输入商品名称" @input="onSearch"></el-input>
                    </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-button type="primary" size="medium" @click="handleEdit">添加商品</el-button>
        <div class="tabledata mar_t20">
            <el-table
                    :data="list"
                    v-loading="listLoading"
                    :element-loading-text="elementLoadingText"
                    stripe
                    style="width: 100%"
            >
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="sort" label="排序" width="80"></el-table-column>
                <el-table-column  label="商品主图" width="150">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p><img :src="scope.row.icon" class="listImgWidth" /></p>
                            <div slot="reference" class="name-wrapper">
                                <div class="imgbox"><img :src="scope.row.icon" class="tabimg" /></div>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="商品名称"
                >
                </el-table-column>
                <el-table-column prop="typeName" label="商品分类"></el-table-column>
                <el-table-column prop="type" label="商品类型" >
                    <template slot-scope="scope">
                        <div v-if="scope.row.type=='1'"><el-tag type="success" size="mini">实物商品</el-tag></div>
                        <div v-if="scope.row.type=='2'"><el-tag size="mini">虚拟商品</el-tag></div>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="兑换价格" >
                    <template slot-scope="scope">
                        <div>{{scope.row.score}}积分+{{scope.row.money}}元</div>
                    </template>
                </el-table-column>
                <el-table-column prop="stock" label="已兑/剩余" >
                    <template slot-scope="scope">
                        <div><span class="subjectcolor2">{{scope.row.convertNum}}</span>/{{scope.row.stock}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="display"
                        label="状态"
                >
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                                   @change="changeSwitch(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <div class="flex">
                            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.pagesize"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
<!--            <edit ref="edit" @fetchData="fetchData"></edit>-->
        </div>
    </div>
</template>
<script>
    import {goodsList,modifyGoods} from "@/api/plug";

    export default {
        created() {
            this.fetchData();
        },
        data() {
            return {
                formInline: {
                    name: '',
                    type: '',
                },
                list: [],
                listLoading: true,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
                labelOptions:[
                    {
                        label:1,
                        value:'优惠券',
                    },
                    {
                        label:2,
                        value:'折扣券',
                    },
                ],
            }
        },
        methods: {
            async fetchData() {
                this.listLoading = true;
                const {data, count} = await goodsList({page: this.page.currentPage,name:this.formInline.name});
                this.list = data;
                this.page.total = count;
                this.listLoading = false;
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            onSearch(){
                this.fetchData();
            },
            async changeSwitch(row) {
                const {msg} = await modifyGoods({id: row.id, display: row.display,type:1});
                this.$baseMessage(msg, "success");
                this.fetchData();
            },
            handleDelete(row) {
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {msg} = await modifyGoods({id: row.id,type:2});
                        this.$baseMessage(msg, "success");
                        this.fetchData();
                    });
                } else {
                    if (this.selectRows.length > 0) {
                        const id = this.selectRows.map((item) => item.id);
                        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                            const {msg} = await modifyGoods({id,type:2});
                            this.$baseMessage(msg, "success");
                            this.fetchData();
                        });
                    } else {
                        this.$baseMessage("未选中任何行", "error");
                        return false;
                    }
                }
            },
            handleEdit(row) {
                if (row.id) {
                    this.$router.push(`/addobject?id=${row.id}`);
                } else {
                    this.$router.push({path: 'addobject'})
                }
            },
        }
    }
</script>
